<template>
	<view class="content">
		<view class="game">
			<view class="personal-info" v-for="(item,index) in person" :key="index">
				<view>
					<image :src="item.customerHeadImage"></image>
				</view>
				<text class="name">{{item.name}}</text><text class="ID">ID {{item.ID}}</text>
			</view>
			<view class="invit">
				<text class="invitTitle">邀请码</text>
				<text class="invitNumber">{{invit}}</text>
				<text class="copy" @click="copyNumber">复制</text>
				<text class="invit-friend">邀请伙伴</text>
			</view>
		</view>
		<view class="invitI" v-for="(item,index) in otherInvit" :key="index">
			<view class="invit-info">我的邀请人</view>
			<view class="center-content">
				<view class="left-info">
					<view class="name">{{item.name}}</view>
					<view class="phone">{{item.phone}}</view>
					<view class="time">邀请时间：{{item.time}}</view>
				</view>
				<view class="right-info">
					<text class="ID">ID {{item.ID}}</text>
					<view>
						<image :src="item.customerHeadImage"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="myInvit">
			<view class="invit-info">我的邀请</view>
			<view class="center-content">
				<view class="left-info">
					<view class="allPeople">{{allPeople}}</view>
					<view class="allTitle">总邀请人数</view>
				</view>
				<view class="right-info">
					<view class="allPay">{{allPay}}</view>
					<view class="allTitle">总付款</view>
				</view>
			</view>
			<view class="getMoney">用户LV***刚刚获得300元推广收益</view>
		</view>
		<view class="invit-list">我的邀请列表（{{count}})</view>
		<view class="invitIList" v-for="(item,index) in invitOther" :key="index">
			<view class="center-content">
				<view class="left-info">
					<view class="name">{{item.name}}</view>
					<view class="phone">{{item.phone}}</view>
					<view class="time">邀请时间：{{item.time}}</view>
				</view>
				<view class="right-info">
					<text class="ID">ID {{item.ID}}</text>
					<view>
						<image :src="item.customerHeadImage"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="invit-bottom">我的邀请列表({{count}})</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				person: [{
					customerHeadImage: '/static/my/header.png',
					time: '2011-11-23',
					phone: '133****6806',
					name: '突击的购物贼',
					ID: '421190',
				}],
				invitOther: [{
						customerHeadImage: '/static/my/header.png',
						time: '2011-11-23',
						phone: '133****6806',
						name: 'LVRIGHT',
						ID: '421190',
					},
					{
						customerHeadImage: '/static/my/header.png',
						time: '2011-11-23',
						phone: '133****6806',
						name: 'LVRIGHT',
						ID: '421190',
					}
				],
				otherInvit: [{
					customerHeadImage: '/static/my/header.png',
					time: '2011-11-23',
					phone: '133****6806',
					name: 'LVRIGHT',
					ID: '421190',
				}],
				invit: 'ej41fk',
				allPay: '2',
				allPeople: '22',
				count: 0
			}
		},
		methods: {
			//获取剪贴板
			copyNumber: function() {
				uni.setClipboardData({
					data: 'hello',
					success: function() {
						console.log('success');
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.content {
		/*  #ifndef  H5  */
		/*  #endif  */
		background-color: #F5F5F5;

		.game {
			width: 90%;
			height: 304rpx;
			background: #F9E5BC;
			border-radius: 16px;
			margin:40rpx auto 50rpx auto;
			.personal-info {
				padding-bottom: 40rpx;
				image {
					width: 100rpx;
					height: 100rpx;
					margin: 30rpx;
					border-radius: 50%;
				}

				.name {
					display: block;
					margin: -130rpx 20rpx 0rpx 150rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 45rpx;
				}

				.ID {
					font-size: 27rpx;
					margin-left: 23%;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(109, 114, 120, 1);
					line-height: 33rpx;
				}
			}


			.invit {
				padding-top: 50rpx;
				border-top: 1rpx solid #ECD6AB;

				.invitTitle {
					margin: 0rpx 10rpx 0rpx 50rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 28rpx;
				}

				.invitNumber {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 45rpx;
					margin: 0rpx 0rpx 0rpx 20rpx;
				}

				.copy {
					margin: 0rpx 120rpx 0rpx 40rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(158, 137, 93, 1);
					line-height: 28rpx;
				}

				.invit-friend {
					border-radius: 12rpx;
					background: rgba(243, 217, 164, 1);
					border-radius: 16rpx;
					padding: 20rpx 33rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(158, 137, 93, 1);
					margin-left: 50rpx;
				}
			}

		}

		.invitI {
			width: 90%;
			margin:auto;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 30rpx;
			
			.center-content{
				display: flex;
				
				image {
					width: 100rpx;
					height: 100rpx;
					float: right;
					border-radius: 50%;
				}
				
				.left-info {
					display: block;
				
					.name {
						padding-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				
					.phone {
						padding-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				
					.time {
						padding-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				}
				
				.right-info {
					display: flex;
					
					image{
						margin-top: 20rpx;
					}
				
					.ID {
						margin: 50rpx 30rpx 0rpx 80rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				}
			}
			
			.invit-info {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 45rpx;
			}
			
		}

		.myInvit {
			width: 90%;
			margin:auto;
			margin: 30rpx 40rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 40rpx;
			
			.center-content{
				display: flex;
				
				image {
					width: 100rpx;
					height: 100rpx;
					float: right;
					border-radius: 50%;
				}
				
				.left-info {
					display: block;
					margin-left: 40rpx;
				
					.allPeople {
						font-size: 48rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(255, 94, 77, 1);
						line-height: 67rpx;
						margin-left: 40rpx;
						padding-top: 30rpx;
					}
				
					.allTitle {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(109, 114, 120, 1);
						line-height: 33rpx;
						margin-left: 15rpx;
					}
				}
				
				.right-info {
					display: block;
					margin:28rpx 40rpx 0rpx 280rpx;
				
					.allPay {
						font-size: 48rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(255, 94, 77, 1);
						line-height: 67rpx;
						margin-left: 30rpx;
					}
				
					.allTitle {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(109, 114, 120, 1);
						line-height: 33rpx;
						margin-left: 15rpx;
					}
				}
				
			}
			
			.getMoney {
				margin-top: 30rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 37rpx;
				border-top: 1rpx solid #f4f4f4;
				padding: 20rpx 20rpx 0rpx 20rpx;
			}
			
			.invit-info {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 45rpx;
			}
			
		}

		.invitIList {
			width: 90%;
			margin:auto;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f4f4f4;

			.center-content{
				display: flex;
				
				image {
					width: 100rpx;
					height: 100rpx;
					float: right;
					border-radius: 50%;
				}
				
				.left-info {
					display: block;
				
					.name {
						padding-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				
					.phone {
						padding-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				
					.time {
						padding-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				}
				
				.right-info {
					display: flex;
				
					image{
						margin-top: 20rpx;
					}
				
					.ID {
						margin: 50rpx 30rpx 0rpx 80rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
					}
				}
			}
		}

		.invit-list {
			width: 90%;
			margin:auto;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 45rpx;
			background: rgba(255, 255, 255, 1);
			padding: 20rpx 0rpx 0rpx 30rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
		}

		.invit-bottom {
			width: 90%;
			color: rgba(255, 255, 255, 1);
			margin:auto;
			background: rgba(255, 255, 255, 1);
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;
			margin-bottom: 127rpx;
		}

	}
</style>
